<template>
  <view class="content">
    <view
      style="position: fixed; top:40upx; right:40upx;z-index: 999999; background: #fff;
box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.1);border-radius: 100%; width: 80upx; height: 80upx; padding:10upx;"
      @click="linkadd">
      <image
        :src="img+'mapicon_url.png'"
        style="width: 60upx; height: 60upx; display: block;margin: auto;">
      </image>
    </view>
    <view
      v-if="userType=='xs'"
      style="position: fixed; top:150upx; right:40upx;z-index: 999999; background: #fff;
box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.1);border-radius: 100%; width: 80upx; height: 80upx; padding:10upx;"
      @click="add_cus">
      <image
        :src="img+'mapicon_add.png'"
        style="width: 60upx; height: 60upx; display: block;margin: auto;">
      </image>
    </view>
    <block v-if="!loading">
      <!-- :latitude="latitude" :longitude="longitude" -->
      <map
        :latitude="latitude"
        :longitude="longitude"
        :show-location="true"
        style="width: 100%; height: 100vh;"
        scale="12"
        :anchor="{x:1,y:1}"
        :markers="covers"
        :polyline="polyl"
        @markertap="markerClick"></map>
    </block>
    <view class="fasklobg"
      :class="{showobg:show}">
      <view
        class="boxobj x-row">
        <view
          @click="gotoStoreIndex">
          <image
            :src="customer.business.avatar"
            style="width: 144upx; height: 144upx; border-radius: 16upx; display: block;">
          </image>
        </view>
        <view class="x-col"
          style="padding-left: 20upx; position: relative;">
          <view class="t_name"
            @click="gotoStoreIndex">
            {{customer.business.bname}}
          </view>
          <view class="x-row"
            @click="cellPhone">
            <image
              :src="img+'maptel.png'"
              class="maptel x-col-center"
              mode="widthFix">
            </image>
            <view class="tel">
              {{customer.business.phone}}
            </view>
            <view class=""
              style="width: 40upx;">
            </view>
            <image
              :src="img+'mapshop.png'"
              class="maptel x-col-center"
              mode="widthFix">
            </image>
            <view class="tel">
              {{customer.business.value}}㎡
            </view>
          </view>

          <view class="x-row"
            style="padding-top: 10upx;"
            @click="toStore">
            <image
              :src="img+'mapicon.png'"
              class="mapicon"
              mode="widthFix">
            </image>
            <view class="tel">
              {{customer.address}}{{customer.address_info?customer.address_info:''}}
            </view>
          </view>
        </view>
        <image
          @click="toStore"
          :src="img+'navigation.png'"
          style="width:96upx;"
          class="imgmap x-col-center"
          mode="widthFix">
        </image>
      </view>
      <block
        v-if="userType=='xs'">

        <view class="x-row"
          style="margin: 0 15rpx 10rpx 15rpx;"
          v-if="userAry[1].value=='sj'">
          <view
            class="buttonAdd"
            style="margin: 0 15rpx;"
            @click="addVistore">
            添加拜访记录</view>
          <view
            class="buttonAdd"
            style="margin: 0 15rpx;"
            @click="addProducts">
            立即进货</view>
        </view>
        <view
          class="buttonAdd"
          v-else
          @click="addVistore">
          添加拜访记录</view>
      </block>
      <view class="buttonAdd"
        v-if="userType=='sj'"
        @click="lookOrder">
        查看进货订单</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      img: this.urlimg + 'mini/',
      latitude: '30.575394',
      longitude: '104.069465',
      covers: [
        // {latitude:30.64242,
        // longitude:104.04311,
        // iconPath:'/static/mapmar2.png',},
      ],
      polyl: [
        // 	{
        // 	points: [{
        // 		latitude: '30.523256',
        // 		longitude: '103.891503'
        // 	},{
        // 		latitude: '30.575394',
        // 		longitude: '104.069465'
        // 	}],
        // 	color:'#EB3E00',
        // 	width:4,
        // },
      ],
      loading: true,
      clist: [],
      customer: '',
      userType: 'xs', //默认销售xs
      userAry: uni.getStorageSync('userTypeAry')
    }
  },
  onLoad() {
    this.init()
    this.userType = uni.getStorageSync('userType')
  },
  methods: {
    addVistore() {
      uni.removeStorageSync('ec_imgs')
      uni.removeStorageSync('ex_imgs')
      this.$api.navigator('../sale/addvisitrecord?cid=' + this.customer.id + '&cname=' + this.customer.uname)
    },
    gotoStoreIndex() {
      this.$api.navigator('my_customer_detail?id=' + this.customer.id)
    },
    addProducts() {
      this.$api.navigator('../sale/productstobepurchased?source=sj&bid=' + this.customer.bid)
    },
    lookOrder() {
      this.$api.navigator('../driver/sendOrder?id=' + this.customer.id + '&bid=' + this.customer.bid)
    },
    markerClick(e) {
      console.log(e)
      var idx = parseInt(e.detail.markerId) - 1

      this.customer = this.clist[idx]
      this.show = true
    },
    cellPhone() {
      uni.makePhoneCall({
        phoneNumber: this.customer.business.phone
      })
    },
    toStore() {
      uni.openLocation({
        //​使用微信内置地图查看位置。
        latitude: parseFloat(this.customer.business.lat), //要去的纬度-地址
        longitude: parseFloat(this.customer.business.lon), //要去的经度-地址
        name: this.customer.business.map_address
      })
    },
    init() {
      var _this = this
      this.$api.getUserLoacation(function () {
        uni.getLocation({
          type: 'gcj02',
          success: function (res) {
            _this.longitude = res.longitude
            _this.latitude = res.latitude
            _this.getRoute()
          },
          fail(e) {
            console.log(e, '获取位置失败')
          },
          complete() {
            _this.getRoute()
          }
        })
      })
    },
    linkadd() {
      uni.navigateTo({
        url: './map_customer?from=map'
      })
    },
    add_cus() {
      uni.navigateTo({
        url: '../sale/add_customer'
      })
    },
    // user/route 销售我的路线  user/droute司机送货路线
    getRoute() {
      let that = this
      this.$axios(this.userType == 'xs' ? 'user/route' : 'user/droute', {}).then(res => {
        // 组装标记点 covers 参数
        // mapmar1
        var data = res.result,
          cov = [],
          poly = [],
          points = [],
          colorLi = []
        for (let i in data) {
          cov.push({
            latitude: data[i].business.lat,
            longitude: data[i].business.lon,
            id: parseInt(i) + 1,
            iconPath: data[i].status == 1 ? '/static/mapmar2.png' : '/static/mapmar1.png',
            // title: (parseInt(i) + 1),
            width: 30,
            height: 30,
            label: data[i].business.is_deal != 1 ? { content: '未成交', x: -19, y: 1, color: '#ffffff', fontSize: 12, padding: 2, borderRadius: 8, bgColor: '#F5A623', textAlign: 'center' } : ''
          })
          points.push({
            latitude: data[i].business.lat,
            longitude: data[i].business.lon
          })
          // 线路颜色 根据 是否拜访来判定  status 0未拜访 1拜访
          colorLi.push(data[i].status == 1 ? '#2B88FE' : '#EB3E00')
        }
        that.polyl = [
          {
            points: points,
            width: 2,
            colorList: colorLi
          }
        ]
        that.covers = cov
        that.clist = data
        // that.customer=data[0]
        that.loading = false
      })
    }
  }
}
</script>

<style scoped>
.buttonAdd {
  width: 654upx;
  height: 84upx;
  background: #2b88fe;
  border-radius: 8upx;
  margin: 10rpx auto;
  line-height: 84upx;
  color: #fff;
  text-align: center;
  font-size: 32upx;
}

.boxobj {
  padding: 32upx;
}

.t_name {
  color: #333;
  font-size: 36upx;
  padding-bottom: 10upx;
}

.maptel {
  width: 28upx;
}

.tel {
  color: #333;
  font-size: 26upx;
  padding-left: 10upx;
}

.mapicon {
  width: 36upx;
  margin-top: 5upx;
}

.imgmap {
  /* position: absolute;
		right: 0;
		top: 0upx */
}

.fasklobg {
  position: fixed;
  width: 100%;
  left: 0;
  z-index: 1007;
  bottom: 0;
  background: #fff;
  transform: translateY(100%);
}

.showobg {
  transform: translateY(0%);
  transition: all 0.5s;
}
</style>
